import React, { Component } from "react";
import { Input, Space } from "antd";
import { LeftOutlined, UserOutlined } from "@ant-design/icons";
import { NavBar } from "antd-mobile";
import axios from "axios";

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      captcha: "",
      phone: "",
      password: "",
      nickname: "",
      phoneIpt: "#ccc",
    };
  }

  // 绑定表单值
  handleChange(key, e) {
    this.setState({
      [key]: e.target.value,
    });
    console.log(this.state);
  }

  // 手机号检测是否 存在
  isPhone(e) {
    if (e.target.value.length != 11) {
      console.log("请输入正确的手机号码");
      this.setState({ phoneIpt: "#ccc" });
    } else {
      axios
        .get("http://localhost:4000/cellphone/existence/check", {
          params: {
            phone: e.target.value,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.exist === 1) {
            this.setState({ phoneIpt: "red" });
            console.log(e.target);
          }
        });
    }
  }
  // 获取验证码
  zhuce = () => {
    console.log(this.state.phone);
    axios
      .get("http://localhost:4000/captcha/sent", {
        params: {
          phone: parseInt(this.state.phone),
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.data == true) {
        }
      });
  };

  render() {
    return (
      <div>
        <div>
          <NavBar
            mode="light"
            icon={<LeftOutlined />}
            onLeftClick={() => {
              window.history.back(-1);
            }}
          >
            注册
          </NavBar>
        </div>
        <div style={{ width: "80%", marginLeft: "10%", marginTop: "50px" }}>
          <Input
            size="large"
            placeholder="请输入昵称"
            prefix={<UserOutlined />}
            style={{ marginTop: "20px" }}
            onChange={(value) => this.handleChange("nickname", value)}
          />
          <Input
            size="large"
            placeholder="请输入手机号"
            prefix={<UserOutlined />}
            style={{
              marginTop: "10px",
              borderColor: this.state.phoneIpt,
            }}
            onChange={(value) => this.handleChange("phone", value)}
            onInput={(e) => this.isPhone(e)}
            className="input-phone"
          />

          <div
            style={{
              width: "30%",
              height: "30px",
              backgroundColor: "red",
              marginTop: "10px",
              textAlign: "center",
              lineHeight: "30px",
              borderRadius: "20px",
              float: "right",
            }}
            ref={() => {}}
            onClick={this.zhuce}
          >
            获取验证码
          </div>

          <Input
            placeholder="验证码"
            size="large"
            style={{ marginTop: "10px" }}
            onChange={(e) => this.handleChange("captcha", e)}
          />
          <Input.Password
            placeholder="请输入密码"
            size="large"
            style={{ marginTop: "10px" }}
            onChange={(value) => this.handleChange("password", value)}
          />
          <button
            style={{
              width: "100%",
              height: "40px",
              border: "none",
              marginTop: "10px",
              backgroundColor: "red",
              borderRadius: "20px",
            }}
          >
            注册
          </button>
        </div>
      </div>
    );
  }
}

export default Register;
